<template>
<view class="page">
	<!-- <updateVersion></updateVersion> -->
	<view v-if="cate.length>0" class="h45 m-b2">
		<view class="fix-wrap"> 
			<view class="h45 limit-tab">
				<view :class="['item',{'active':type==0}]" @click="changeCate(0)">
					<view class="name">全部</view>
					<view class="active-line"></view>
				</view>
				<view :class="['item',{'active':item.id==type}]" v-for="(item,index) in cate" :key="index" @click="changeCate(item.id)">
					<view class="name">{{item.typename}}</view>
					<view class="active-line"></view>
				</view> 
			</view>
		</view>
	</view>  
	<view class="contain">
		<template v-if="loadingState.default">
			<loading :loadingState="loadingState"></loading>
		</template>
		<template v-else>
			<template v-if="list.length>0">
				<view class="article-wrap">					
					<view class="item" v-for="(item,index) in list" :key="index" 
					:data-id="item.id" 
					:data-typeid="item.typeid" 
					:data-url="item.outlink"
					:data-index="index"
					:data-title="item.title" @click="jump">
						<view v-if="item.litpic" class="pic">
							<image :src="web_host+item.litpic" mode="widthFix" class="article-img"></image> 
						</view>
						<view class="info">
							<view class="title split-line">{{item.title}}</view>
							<view class="label-bar">
								<view class="day-time">
									<view class="iconfont icon-yuedujilu f-s30">&#xe614;</view>
									<text class="text">{{item.pubdate}}</text> 
								</view>
								<view class="label">
									<view class="click-data">
										<view class="iconfont icon-yuedu">&#xe639;</view>
										<text class="text">{{item.click}}</text> 
									</view>									
								</view>								
							</view>
							<view class="typename">{{item.typeid=='93'?'红火蚁公众号':item.typename}}</view>
							
						</view>
					</view> 
				</view>
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<empty msg="暂无信息"></empty> 
			</template>			
		</template>
		
		 
	</view>
</view>
</template>

<script>
import {NEWS_HOST} from '@/config.js'  
import loading from '@/components/loading-more.vue' 
import empty from '@/components/empty.vue' 
export default{
	name:'list',
	data(){
		return { 
			isEmpty:false,
			loadingState:{		 
				default:true,
				loading:false,
				completed:false
			},
			list:[],
			total:0,
			page:1,
			type:0,
			cate:[],
			web_host:NEWS_HOST
		}	 
	},
	async onLoad(params) {
		
		this.newsList();
		this.newsCate();
		
	}, 
	onPullDownRefresh(){
		 
	},
	onReachBottom(){
		if(this.loadingState.completed){
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++;
				this.newsList();
			} 
		}	  
	},
	methods:{
		newsList:async function(){
			let res=await this.$api.news_api.news({
				act:'artlist',
				page:this.page,
				typeid:this.type
			})   
			if(res.data.rcode==1){
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length==res.data.data.count){
					this.loadingState.default=false;
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}else{
				this.loadingState.default=false;
			}
		},
		
		newsCate:async function(){
			let res=await this.$api.news_api.news({
				act:'artcate' 
			})  
			if(res.data.rcode==1){ 
				this.cate=res.data.data.list;				 
			} 
		},
		
		changeCate:function(type){
			this.type=type;
			this.list=[];
			this.page=1;
			this.loadingState.default=true;
			this.loadingState.loading=false;
			this.loadingState.completed=false;
			this.newsList();
		},
		
		jump(e){ 
			let id=e.currentTarget.dataset.id;
			let typeid=e.currentTarget.dataset.typeid;
			let url=e.currentTarget.dataset.url; 
			let index=e.currentTarget.dataset.index;  
			this.list[index].click=parseInt(this.list[index].click)+1
			if(typeid==93){
				// 公众号文章
				uni.navigateTo({
					url:`/pages/webview/webview?page_type=article&url=${url}`
				})
			}else{
				uni.navigateTo({
					url:`/package_article/detail/detail?id=${id}`
				})
			}
		}
		
		
	},
	components:{ 
		loading,
		empty 
	}
}
</script>

<style lang="less">
.article-type{
	padding:0 20rpx;
	.item{
		margin:0 10rpx;
	}
}
.article-wrap{
	margin-bottom: 20rpx;
	background: #fff;
}
.article-wrap .item{
	padding:20rpx;
	border-bottom:1rpx solid #eee;
	display: flex; 
}
.article-wrap .item .pic{
	width:30%;
	margin-right:20rpx;
	max-height: 150rpx;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.article-wrap .item .pic image{
	width:100%;
}
.article-wrap .item .info{
	width:65%;
	flex-grow: 2; 
}
.article-wrap .item .info .title{
	margin-bottom:20rpx;
	font-size:30rpx;
}
.article-wrap .item .info .label-bar{
	display: flex; 
	color:#999;
	font-size:26rpx;
}
.article-wrap .item .info .label-bar text{
	margin:0 10rpx;
}
.typename{
	display: inline-block;
	padding:0 5rpx;
	margin-top: 20rpx;
	border:1rpx solid #f00;
	border-radius: 5rpx;
	color:#f00;
}
.day-time{
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}
.click-data{
	display: flex;
	align-items: center;
}
</style>
